<template>
	<view class="container">

		<view>
			<tui-list-cell unlined>
				<view class="tui-line-cell">
					<view class="tui-title">{{merchantName}}</view>

					<view class="tui-time-tab">
						<tui-segmented-control :values="navbar" :current="currentDataType" radius="30px"
							activeColor="#07c160" @click="change">
						</tui-segmented-control>
					</view>

				</view>
			</tui-list-cell>

			<view class="tui-header-btm">
				<view class="tui-btm-item">
					<view class="tui-btm-text">下单（次）</view>
					<view class="tui-btm-num">{{businessAnalysis.count}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">销售额</view>
					<view class="tui-btm-num">{{businessAnalysis.amount}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">日平均</view>
					<view class="tui-btm-num">{{businessAnalysis.average}}</view>

				</view>
				<view class="tui-btm-item">
					<view class="tui-btm-text">绩效</view>
					<view class="tui-btm-num">{{businessAnalysis.salesmanCom}}</view>

				</view>
			</view>
			<canvas canvas-id="mjaSvTRmhqntNaXubSmUcKzoyrGcrODQ" id="mjaSvTRmhqntNaXubSmUcKzoyrGcrODQ" class="charts"
				@touchend="tap" />

		</view>

		<tui-list-cell class="mt15" padding="10" :arrow="true" :lineLeft="false" @click="merchantOrder()">
			<view class="tui-cell-header">
				<view class="tui-cell-title">查看订单明细</view>
				<view class="tui-cell-sub"></view>
			</view>
		</tui-list-cell>


		<view class="tui-visit-list">
			<tui-list-cell class="mt15" padding="10" :arrow="true" :lineLeft="false" @click="href(4)">
				<view class="tui-cell-header">
					<view class="tui-cell-title">巡店记录</view>
					<view class="tui-cell-sub"></view>
				</view>
			</tui-list-cell>
			<view class="tui-evaluate__box" v-for="(item,index) in visitRecordList" :key="index">
				<!-- <view class="tui-flex__center">
					<image src="/static/images/news/avatar_1.jpg" class="tui-avatar"></image>
					<view class="tui-nickname">zmh06721</view>
				</view> -->
				<view class="tui-content__box pt10">
					<!-- <view class="tui-rate__box">
						<tui-rate :current="item.star" :size="14"></tui-rate>
						<text>2020-06-21</text>
					</view> -->
					<view class="tui-desc">
						{{item.remark}}
					</view>
					<view class="tui-img__box" v-if="item.imgList && item.imgList.length>0">
						<block v-for="(src,subIndex) in item.imgList" :key="subIndex">
							<image @tap.stop="previewImage(index,subIndex)"
								:class="{'tui-image':item.imgList.length===1}" :src="src"
								:mode="item.imgList.length===1?'widthFix':'aspectFill'"></image>
						</block>
					</view>
					<view class="tui-op__box tui-flex__center pb10">
						<view v-if="item.beginTime" class="tui-specs">开始时间：{{item.beginTime.substring(5)}}</view>
						<view v-if="item.endTime" class="tui-flex__center">
							<view class="tui-op-item">
								<text class="font-color-sub">结束时间：{{item.endTime.substring(5)}}</text>

							</view>
							<!-- <view class="tui-op-item" @tap="evaluateDetail">
								<text>1</text>
								<tui-icon name="message" :size="40" unit="rpx" color="#333"></tui-icon>
							</view> -->
						</view>
					</view>
				</view>
			</view>

		</view>

		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->

	</view>
</template>

<script>
	import {
		getMerchantDetail,
		getShopVisitRecord
	} from '@/apis/user'
	import uCharts from '@/libs/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				merchantName: "营业额数据分析",
				navbar: ["上周", "本周", "30天"],
				cWidth: 750,
				cHeight: 500,
				id: 0,
				//0 上周  1 本周  2 近30天
				currentDataType: 1,
				curveData: {
					categories: [],
					series: []
				},
				visitRecordList: [],
				pageNum: 1,
				pageSize: 100,
				loadding: false,
				pullUpOn: true,
				businessAnalysis: [],
			}
		},
		onReady() {

		},
		mounted() {
			// //这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			// //这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);

			this.id = this.$yroute.query.id;

			this.getServerData();
			this.doGetVisitRecord();
		},
		methods: {
			change(e) {
				console.log(e);
				this.currentDataType = e.index;
				this.getServerData();
			},
			getServerData() {
				let that = this;
				const id = this.id;
				if (!id) {
					that.tui.toast("id不存在！")
					return;
				}
				getMerchantDetail(that.id, that.currentDataType).then(res => {

					that.businessAnalysis = res.data;
					that.curveData.categories = [];
					that.curveData.series = [];
					var dayAmount = {
						name: "营业额",
						data: []
					};
					res.data.table.forEach(item => {
						if (item != null) {
							that.curveData.categories.push(item.click_date.substring(5));
							dayAmount.data.push(item.amount);
						}

					})
					that.curveData.series.push(dayAmount);
					this.drawCurveCharts('mjaSvTRmhqntNaXubSmUcKzoyrGcrODQ', that.curveData);
				})
			},
			doGetVisitRecord: function() {
				let that = this;
				const id = this.id;
				if (!id) {
					that.tui.toast("id不存在！")
					return;
				}
				getShopVisitRecord(that.id, that.pageNum, that.pageSize).then(res => {
					if (that.pageNum === 1) {
						that.visitRecordList = [];
					}
					that.visitRecordList = that.visitRecordList.concat(res.rows)
					for (var i = 0; i < that.visitRecordList.length; i++) {
						that.visitRecordList[i].imgList = [];

						if (that.visitRecordList[i].img1) {
							that.visitRecordList[i].imgList.push(that.visitRecordList[i].img1.split(','));
						}
						if (that.visitRecordList[i].img2) {
							that.visitRecordList[i].imgList.push(that.visitRecordList[i].img2.split(','));
						}
						if (that.visitRecordList[i].img3) {
							that.visitRecordList[i].imgList.push(that.visitRecordList[i].img3.split(','));
						}
						console.log(that.visitRecordList[i].imgList)
					}

					that.pageNum++;
					//是否可以加载更多
					that.pullUpOn = that.visitRecordList.length < res.total
					//正在加载
					that.loading = false
					that.visitRecordList = res.rows;

				})

			},
			drawCurveCharts(id, data) {
				let that = this;
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "line",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#2FCC71"],
					padding: [15, 10, 0, 15],
					fontSize: 10,
					fontColor: "#999999",
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontColor: "#666666",
						fontSize: 10,
						labelCount: 7,
						itemCount: that.businessAnalysis.length,

					},
					yAxis: {
						disabled: false,
						gridType: "dash",
						fontColor: "#666666",
						fontSize: 10,
						splitNumber: 5,
						dashLength: 2,
						gridColor: "#F2F2F2",
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				});
			},
			merchantOrder: function() {
				let that = this;
				this.$yrouter.push({
					path: "/pages/business/merchantOrderList/merchantOrderList",
					query: {
						id: that.id
					},

				})
			}

		},

		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			console.log("merchantDetail onPullDownRefresh")
			this.pageNum = 1;
			uni.stopPullDownRefresh();

			this.doGetVisitRecord();
		},

		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("merchantDetail onReachBottom")
			if (this.pullUpOn) {
				this.doGetVisitRecord();
			}

		}
	}
</script>

<style>
	.charts {
		width: 750rpx;
		height: 500rpx;
		background: #fff;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-content__box {
		width: 100%;
		padding: 0 30rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.tui-desc {
		font-size: 28rpx;
		word-break: break-all;
		text-align: justify;
	}

	.tui-header-btm {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 0 24rpx 0;
		justify-content: space-between;
		background: #fff;
		border-radius: 12rpx;
	}

	.tui-time-tab {
		width: 300rpx;
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-btm-num {
		font-size: 36rpx;
		font-weight: 600;
		position: relative;
		color: #333;
	}

	.tui-btm-text {
		font-size: 24rpx;
		opacity: 0.85;
		padding-top: 11rpx;
		color: #999;
	}

	.tui-img__box {
		width: 100%;
		font-size: 0;
		padding-top: 4rpx;
	}

	.tui-img__box image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 12rpx;
		margin-top: 12rpx;
	}

	.tui-image {
		width: 400rpx !important;
		height: auto;
	}

	.tui-visit-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-visit-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 10rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-evaluate__box {
		width: 100%;
		padding: 25rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		overflow: hidden;
	}

	.tui-op__box {
		width: 100%;
		padding-top: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
		justify-content: space-between;
	}

	.tui-op-item {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}

	.tui-op-item text {
		padding-right: 6rpx;
	}

	.tui-specs {
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		word-break: break-all;
	}

	.tui-flex__center {
		display: flex;
		align-items: center;
	}
</style>